<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-btns">
            <button
                *ngIf="permission.userPermission.has('marketing:ad:add')"
                nz-button
                nzType="primary"
                (click)="jumpPage(0)">
                新增广告项
            </button>
        </div>

        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">名称</label>
                <div class="common-search-conrol">
                    <input nz-input placeholder="标题" [(ngModel)]="seachForms.title" />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">状态</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="全部"
                        [(ngModel)]="seachForms.status"
                    >
                        <nz-option nzValue="0" nzLabel="未开始"></nz-option>
                        <nz-option nzValue="1" nzLabel="进行中"></nz-option>
                        <nz-option nzValue="2" nzLabel="已结束"></nz-option>
                        <nz-option nzValue="3" nzLabel="已删除"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <div class="common-search-conrol">
                    <button nz-button nzType="primary" class="m-r-8" (click)="searchData()">查询</button>
                    <button nz-button nzType="default" (click)="resetData()">重置</button>
                </div>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="pagination-wrap-position m-t-2">
    <!-- Table -->
    <div class="table-wrap">
        <nz-table
            #basicTable
            nzSize="small"
            nzOuterBordered
            nzShowSizeChanger
            nzShowQuickJumper
            [nzScroll]="{ x: '1000px' }"
            [nzFrontPagination]="false"
            [nzLoadingDelay]="100"
            [nzLoading]="tableForms.tableLoading"
            [nzData]="tableData"
            [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
            [nzTotal]="tableForms.total"
            [nzPageIndex]="tableForms.page"
            [nzPageSize]="tableForms.pageSize"
            [nzShowTotal]="totalTemplate"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)"
        >
            <thead>
                <tr>
                    <th nzAlign="center" nzWidth="150px" nzLeft>ID</th>
                    <th nzAlign="center" nzWidth="150px">状态</th>
                    <th nzAlign="center" nzWidth="180px">标题</th>
                    <th nzAlign="center" nzWidth="250px">图片</th>
                    <th nzAlign="center" nzWidth="170px">适用用户</th>
                    <th nzAlign="center" nzWidth="220px">链接</th>
                    <th nzAlign="center" nzWidth="180px">说明备注</th>
                    <th nzAlign="center" nzWidth="170px">生效开始时间</th>
                    <th nzAlign="center" nzWidth="170px">生效截至时间</th>
                    <th nzAlign="center" nzWidth="140px">相关广告位</th>
                    <th nzAlign="center" nzWidth="220px" nzRight>操作</th>
                </tr>
            </thead>

            <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <!-- ID -->
                    <td nzAlign="center" nzLeft>{{ data.id || '-' }}</td>
                    <!-- 状态 -->
                    <td nzAlign="center">
                        <!-- <span *ngIf="!data.status">-</span>
                        <nz-tag *ngIf="data.status" [nzColor]="data.status | currentStatus: 'color'">
                            {{ data.status | currentStatus: 'text' }}
                        </nz-tag> -->
                        <span [ngStyle]="{'color': data.status | currentStatus: 'color'}">
                            {{ data.status | currentStatus: 'text' }}
                        </span>
                    </td>
                    <!-- 标题 -->
                    <td nzAlign="center">{{ data.title || '-' }}</td>
                    <!-- 图片 -->
                    <td nzAlign="center" style="max-width: 390px; overflow: hidden;">
                        <img
                            nz-image
                            height="45px"
                            [nzSrc]="data.imgUrl"
                            nzSrc="error"
                            alt=""
                        />
                    </td>
                    <!-- 适用用户 -->
                    <td nzAlign="center">
                        <nz-tag [nzColor]="'#2db7f5'" *ngIf="data.userType.indexOf('2') != -1">B端</nz-tag>
                        <nz-tag [nzColor]="'#87d068'" *ngIf="data.userType.indexOf('1') != -1">C端</nz-tag>
                        <nz-tag *ngIf="data.userType.indexOf('0') != -1">通用</nz-tag>
                    </td>
                    <!-- 链接 -->
                    <td nzAlign="center" nzBreakWord>{{ data.url || '-' }}</td>
                    <!-- 说明备注 -->
                    <td nzAlign="center" nzBreakWord>{{ data.remark || '-' }}</td>
                    <!-- 生效开始时间 -->
                    <td nzAlign="center">{{ data.beginTime || '-' }}</td>
                    <!-- 生效截至时间 -->
                    <td nzAlign="center">
                        <span [ngClass]="{'tip-yellow': data.endTime | uptoTimeStatus}">
                            {{ data.endTime || '-' }}
                        </span>
                        <i
                            *ngIf="data.endTime | uptoTimeStatus"
                            nz-icon
                            nzType="exclamation-circle"
                            nzTheme="outline"
                            nz-tooltip
                            nzTooltipTitle="该广告将会在36个小时内失效">
                        </i>
                    </td>
                    <!-- 相关广告位 -->
                    <td nzAlign="center">{{ data.number || '-' }}</td>
                    <!-- 操作 -->
                    <td nzAlign="center" nzRight>
                        <button nz-button nzType="link" (click)="jumpPage(3, data)" *ngIf="permission.userPermission.has('marketing:ad:copy')">复制</button>
                        <button *ngIf="data.status != 3&& permission.userPermission.has('marketing:ad:edit')" nz-button nzType="link" (click)="jumpPage(1, data)">编辑</button>
                        <a
                            *ngIf="data.status != 3&& permission.userPermission.has('marketing:ad:delete')"
                            nz-button
                            nz-button-tdlink
                            nzType="link"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除吗?"
                            [nzIcon]="iconTpl"
                            (nzOnConfirm)="deleteConfirm(data.id)">删除</a>
                        <ng-template #iconTpl>
                            <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                        </ng-template>
                    </td>
                </tr>
            </tbody>
        </nz-table>

        <!-- 分页template -->
        <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
    </div>
</nz-card>
